<!DOCTYPE html>
<html>
  <head>
    <title>HSL拾色器</title>
    <meta charset="utf-8">
    <link href="site.css" media="screen" rel="stylesheet" type="text/css">
    <link href="ico.png" rel="shortcut icon">
  </head>
  <body>
    <header>
      <h1 style="padding-top: 5%">HSL拾色器</h1>
    </header>
    <div id="hslpicker">
      <div class="frame">
        <div id='tiles' class='color-tiles'>
          <div class='foreground tile selected' data-name='foreground' title='Adjust foreground tile'>
            <div class='foreground-color tile'></div>
          </div>
          <div class='background tile' data-name='background' title='Adjust background tile'>
            <div class='background-color tile'></div>
          </div>
          <div class='bgs'>
            <div class='bg none' title='透明' data-color='[360,100,100,0]'></div>
            <div class='bg light' title='白色' data-color='[360,100,100,1]'></div>
            <div class='bg dark' title='黑色' data-color='[0,0,0,1]'></div>
            <div class='bg random' title='随机' data-color='random'></div>
          </div>
          <div class='expose' title='show/hide background tile'></div>
        </div>
        <div id='picker' class='sliders'>
          <div class="slider"><div id='h-slider'><div class='handle'></div></div></div> <input id='h'>
          <div class="slider"><div id='s-slider'><div class='handle'></div></div></div> <input id='s'>
          <div class="slider"><div id='l-slider'><div class='handle'></div></div></div> <input id='l'>
          <div class="slider"><div id='a-slider'><div class='handle'></div></div></div> <input id='a'>
        </div>
      </div>
      <div class='color-inputs'>
        <input id="hex" spellcheck="false" type="text">
        <input id="rgba" spellcheck="false" type="text">
        <input id="hsla" spellcheck="false" type="text">
      </div>
    </div>
    <footer>
      <p>
      HSL拾色器
      &copy; 2018 
      </p>
      <p>
      <input class="url" spellcheck="false" readonly="true">
      </p>
    </footer>
    
  </body>
  <script src="jquery-1.9.1.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="/javascripts/jquery.min.js"%3E%3C/script%3E'))</script>
  <script src="hslpicker.js" type="text/javascript"></script>
  <script stype="text/javascript">
    $(document).ready(function(){ 
      site = require('site')()
    });
  </script>
</html> 

